<script setup lang="ts">
import { ref } from 'vue'
import { Star, TrendCharts, Compass } from '@element-plus/icons-vue'

interface Theme {
  id: number
  name: string
  description: string
  icon: string
  color: string
  popularity: number
  isNew: boolean
}

interface Recommendation {
  id: number
  type: 'goal' | 'achievement' | 'theme'
  title: string
  description: string
  icon: string
  progress?: number
  total?: number
  tags: string[]
  popularity: number
}

const themes = ref<Theme[]>([
  {
    id: 1,
    name: '量子深空',
    description: '深邃的宇宙主题，带你探索无限可能',
    icon: '🌌',
    color: 'var(--quantum-blue)',
    popularity: 98,
    isNew: true,
  },
  {
    id: 2,
    name: '镭射霓虹',
    description: '充满未来感的霓虹风格',
    icon: '💫',
    color: 'var(--laser-cyan)',
    popularity: 95,
    isNew: false,
  },
  {
    id: 3,
    name: '全息紫',
    description: '神秘的紫色全息效果',
    icon: '✨',
    color: 'var(--hologram-purple)',
    popularity: 92,
    isNew: true,
  },
  {
    id: 4,
    name: '暗物质',
    description: '深邃的暗色主题',
    icon: '🌑',
    color: 'var(--dark-matter-gray)',
    popularity: 88,
    isNew: false,
  },
])

const recommendations = ref<Recommendation[]>([
  {
    id: 1,
    type: 'goal',
    title: '30天编程挑战',
    description: '每天编写代码，提升编程技能',
    icon: '💻',
    progress: 15,
    total: 30,
    tags: ['编程', '技能提升', '每日任务'],
    popularity: 96,
  },
  {
    id: 2,
    type: 'achievement',
    title: '早起达人',
    description: '连续30天早起打卡',
    icon: '🌅',
    tags: ['生活', '习惯养成'],
    popularity: 94,
  },
  {
    id: 3,
    type: 'theme',
    title: '超新星主题',
    description: '绚丽的橙色主题，充满活力',
    icon: '🌟',
    tags: ['主题', '活力'],
    popularity: 92,
  },
])

const activeTab = ref('recommendations')
const tabs = [
  { label: '为你推荐', value: 'recommendations', icon: Star },
  { label: '热门主题', value: 'themes', icon: TrendCharts },
  { label: '探索更多', value: 'explore', icon: Compass },
]
</script>

<template>
  <div class="discover-container">
    <el-card class="header-card">
      <div class="header-content">
        <div class="title-section">
          <h2>平行宇宙</h2>
          <p>探索无限可能，发现更多精彩</p>
        </div>
        <div class="search-section">
          <el-input
            placeholder="搜索主题、目标或成就..."
            :prefix-icon="Compass"
            class="search-input"
          />
        </div>
      </div>
    </el-card>

    <el-card class="content-card">
      <template #header>
        <div class="card-header">
          <el-tabs v-model="activeTab" class="content-tabs">
            <el-tab-pane v-for="tab in tabs" :key="tab.value" :name="tab.value">
              <template #label>
                <el-icon><component :is="tab.icon" /></el-icon>
                <span>{{ tab.label }}</span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>

      <div v-if="activeTab === 'recommendations'" class="recommendations-grid">
        <el-card v-for="item in recommendations" :key="item.id" class="recommendation-card">
          <div class="recommendation-icon">
            <span class="icon-emoji">{{ item.icon }}</span>
          </div>

          <div class="recommendation-content">
            <div class="recommendation-title">{{ item.title }}</div>
            <div class="recommendation-description">{{ item.description }}</div>

            <div v-if="item.progress !== undefined" class="recommendation-progress">
              <el-progress
                :percentage="(item.progress / item.total!) * 100"
                :color="'var(--laser-cyan)'"
                :show-text="false"
                :stroke-width="4"
              />
              <div class="progress-text">{{ item.progress }}/{{ item.total }}</div>
            </div>

            <div class="recommendation-tags">
              <el-tag v-for="tag in item.tags" :key="tag" size="small" class="tag">
                {{ tag }}
              </el-tag>
            </div>

            <div class="recommendation-popularity">
              <el-icon><TrendCharts /></el-icon>
              <span>{{ item.popularity }}% 热度</span>
            </div>
          </div>
        </el-card>
      </div>

      <div v-else-if="activeTab === 'themes'" class="themes-grid">
        <el-card
          v-for="theme in themes"
          :key="theme.id"
          class="theme-card"
          :style="{ '--theme-color': theme.color }"
        >
          <div class="theme-icon">
            <span class="icon-emoji">{{ theme.icon }}</span>
            <el-tag v-if="theme.isNew" type="success" size="small" class="new-tag"> 新主题 </el-tag>
          </div>

          <div class="theme-content">
            <div class="theme-name">{{ theme.name }}</div>
            <div class="theme-description">{{ theme.description }}</div>

            <div class="theme-popularity">
              <el-icon><TrendCharts /></el-icon>
              <span>{{ theme.popularity }}% 热度</span>
            </div>

            <el-button type="primary" class="apply-theme"> 应用主题 </el-button>
          </div>
        </el-card>
      </div>

      <div v-else class="explore-section">
        <el-empty description="更多精彩内容正在探索中..." :image-size="200">
          <template #image>
            <el-icon class="explore-icon"><Compass /></el-icon>
          </template>
        </el-empty>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.discover-container {
  padding: 20px;
}

.header-card {
  margin-bottom: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-section {
  h2 {
    margin: 0;
    font-size: 24px;
    background: var(--wormhole-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  p {
    margin: 5px 0 0;
    color: var(--text-secondary);
  }
}

.search-section {
  width: 300px;
}

.search-input {
  :deep(.el-input__wrapper) {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: none;

    &:hover {
      border-color: var(--laser-cyan);
    }

    &.is-focus {
      border-color: var(--laser-cyan);
      box-shadow: 0 0 0 1px var(--laser-cyan);
    }
  }
}

.content-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(10px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-tabs {
  :deep(.el-tabs__nav-wrap::after) {
    background-color: var(--border-color);
  }

  :deep(.el-tabs__item) {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;

    &.is-active {
      color: var(--laser-cyan);
    }

    &:hover {
      color: var(--laser-cyan);
    }
  }

  :deep(.el-tabs__active-bar) {
    background-color: var(--laser-cyan);
    height: 2px;
  }
}

.recommendations-grid,
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.recommendation-card,
.theme-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-shadow);
  }
}

.recommendation-icon,
.theme-icon {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: 50%;
  border: 2px solid var(--border-color);
  transition: all 0.3s ease;

  .icon-emoji {
    font-size: 30px;
  }

  .new-tag {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--laser-cyan);
    border: none;
  }
}

.recommendation-card:hover .recommendation-icon,
.theme-card:hover .theme-icon {
  transform: scale(1.1);
  border-color: var(--laser-cyan);
  box-shadow: 0 0 20px rgba(0, 255, 209, 0.3);
}

.recommendation-content,
.theme-content {
  text-align: center;
}

.recommendation-title,
.theme-name {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.recommendation-description,
.theme-description {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.6;
}

.recommendation-progress {
  margin-bottom: 15px;
}

.progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 5px;
}

.recommendation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 15px;
}

.tag {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.recommendation-popularity,
.theme-popularity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 15px;
}

.apply-theme {
  background: var(--theme-color);
  border-color: var(--theme-color);

  &:hover {
    background: var(--theme-color);
    opacity: 0.9;
  }
}

.explore-section {
  padding: 40px 0;
  text-align: center;
}

.explore-icon {
  font-size: 100px;
  color: var(--laser-cyan);
  margin-bottom: 20px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
</style>
